<script setup lang="ts">
  import { changeSite, homeSiteList } from '@/api/home/index'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  const siteList = ref(null)
  const checkId = ref(null) //进入页面已选择的id
  const getHomeSiteList = async (e) => {
    siteList.value = []
    const res = await homeSiteList({ siteName: e ? e : '', idList: checkId.value ? [checkId.value] : undefined })
    if (res.result.length == 0) {
      return false
    }
    res.result.unshift({
      siteName: '全部门店',
      code: '',
      id: '',
    })
    res.result.forEach((i) => {
      i.check = false
    })
    siteList.value = res.result
    // 选中已选中的
    if (checkId.value) {
      siteList.value.forEach((i) => {
        if (i.id == checkId.value) {
          i.check = true
        }
      })
    }
    if (siteList.value.length && !checkId.value) {
      siteList.value.forEach((i) => {
        if (i.siteName == '全部门店') {
          i.check = true
        }
      })
    }
  }
  // 选择门店回传后台缓存
  const storeChoose = () => {
    if (siteList.value == []) {
      return false
    }
    var site = {}
    if (siteList.value.length > 0) {
      siteList.value.forEach((i) => {
        if (i.check) {
          site.name = i.siteName
          site.code = i.siteCode
          site.id = i.id
          site.isUserInterestOrder = i.isUserInterestOrder
        }
      })
    }
    if (!site.id && site.name != '全部门店') {
      return false
    }
    uni.$emit('chooseStore', site)
    uni.setStorageSync('homeSite', site) //用于判断onShow是否再次请求门店列表
    changeSite() //门店切换
    uni.navigateBack()
  }
  const checkbox = (e) => {
    siteList.value.forEach((i) => {
      if (i.id == e.id) {
        i.check = true
      } else {
        i.check = false
      }
    })
  }
  const searchBarSearch = (e) => {
    getHomeSiteList(e)
  }
  onLoad((options) => {
    if (options.id) {
      checkId.value = options.id ? options.id : ''
    }
    getHomeSiteList()
  })
</script>

<template>
  <view class="viewport">
    <ve-search-bar fixed placeholder="请输入" @search="searchBarSearch"></ve-search-bar>
    <view class="record-list" v-if="siteList && siteList.length">
      <view class="selector-item" v-for="(item, index) in siteList" :key="index" @click="checkbox(item)">
        <view>{{ item.siteName }}</view>
        <view class="selector-item_checkbox">
          <ve-icon v-if="item.check" name="icon-checkbox-select" width="28"></ve-icon>
          <ve-icon v-else name="icon-checkbox" width="28"></ve-icon>
        </view>
      </view>
      <!-- 加载结束列表为空时展示 -->
    </view>
    <ve-empty style="margin-top: 100rpx" v-if="siteList.length == 0"></ve-empty>
    <ve-bottom-box>
      <ve-button type="primary" @click="storeChoose" style="width: 100%">确认</ve-button>
    </ve-bottom-box>
  </view>
</template>

<style lang="scss" scoped>
  .viewport {
    min-height: 100vh;
    background: #f7f8fa;
    display: flex;
    flex-direction: column;
  }

  .record-list {
    width: 100%;
  }
  .selector-item {
    position: relative;
    background: #ffffff;
    border-radius: 8rpx;
    padding: 32rpx;
    margin: 24rpx;

    &_checkbox {
      position: absolute;
      top: 30rpx;
      right: 32rpx;
    }

    &_label {
      margin-right: 24px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      line-height: 44rpx;
      font-size: 32rpx;
    }

    &_desc {
      margin-top: 16rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #8491a8;
      line-height: 40rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
</style>
